<!doctype html>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>WebcamJS Test Page</title>
    <style type="text/css">
        body {
            font-family: Helvetica, sans-serif;
        }

        h1, h2, h3 {
            margin-top: 0;
            margin-bottom: 0;
        }

        form {
            margin-top: 15px;
        }

        form input {
            margin-right: 15px;
        }

        #results {
            display: inline-block;
            margin: 20px;
            padding: 20px;
            border: 1px solid;
            background: #ccc;
        }
    </style>
</head>
<body>
<div align=center>
<h1>刷脸进入系统</h1>
<h3>刷脸之前请进入训练网页录入你的面部</h3>

<div id="my_photo_booth">
    <div id="my_camera"></div>

    <!-- First, include the Webcam.js JavaScript Library -->
    <script type="text/javascript" src="assets/js/webcam.js"></script>

    <!-- Configure a few settings and attach camera -->
    <script language="JavaScript">
        Webcam.set({
            // live preview size
            width: 320,
            height: 240,

            // device capture size
            dest_width: 640,
            dest_height: 480,

            // final cropped size
            crop_width: 480,
            crop_height: 480,

            // format and quality
            image_format: 'jpeg',
            jpeg_quality: 90,

            // flip horizontal (mirror mode)
            flip_horiz: true
        });
        Webcam.attach('#my_camera');
    </script>

    <!-- A button for taking snaps -->
    <form>
        <div id="pre_take_buttons">
            <!-- This button is shown before the user takes a snapshot -->
            <input type=button value="Take Snapshot" onClick="preview_snapshot()">
        </div>
    </form>
</div>
</div>
<div id="results" style="display:none">
    <!-- Your captured image will appear here... -->
</div>

<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">

    function preview_snapshot() {
        var timerId = setInterval(function () {
            save_photo();
        }, 1000);

        setTimeout(function () {
            if (timerId) {
                clearInterval(timerId);
            }
            Webcam.reset();
        }, 5000);
    }

    function save_photo() {
        Webcam.freeze();
        // actually snap photo (from preview freeze) and display it
        Webcam.snap(function (data_uri) {
            Webcam.upload(data_uri, 'http://120.76.21.10:9080/api/face/verify', function (code, text) {
                // Upload complete!
                // 'code' will be the HTTP response code from the server, e.g. 200
                // 'text' will be the raw response content
                console.log(code);
                console.log(text);
                if (code == 200) {
                    var resp = JSON.parse(text);
                    if (resp.code == 0) {
                        if (resp.result.isYou) {
                            window.location = 'index.html';
                            alert('登录成功');
                        }
                    } else if (resp.code == -2) {
                        Webcam.unfreeze();
                        alert('系统还未录入人脸');
                        return;
                    }
                }
                Webcam.unfreeze();
                
            });
        });
    }
</script>

</body>
</html>
